@import "./normalize.scss";
@import "./common.scss";

.md-table-container {
  table.gridtable {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }

  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }

  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
    line-height: 20px;
  }
}

section {
  code {
    margin: 0 1px;
    background: #f2f4f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    border: 1px solid #eee;
    overflow: auto;
  }

  pre > code {
    line-height: 20px;
    display: block;
    padding: 12px 20px;
  }

  .code-pan-card {
    & + pre {
      display: none;
    }
    .el-card__body {
      padding: 20px;
    }

    .code-flex {
      flex-direction: column;
      align-items: unset;
    }

    .demo-div {
      padding: 20px;
    }

    .code-footer {
      height: 40px;
      border-top: 1px solid #ededed;
      text-align: center;
      line-height: 40px;
      color: #999;

      .code-icon {
        cursor: pointer;

        &:hover {
          color: #333;
        }
      }
    }
  }
  .code-pan-card.expand {
    border-bottom-width: 0;

    & + pre {
      display: unset;
    }
  }

  ul,
  ol {
    li + li {
      margin-top: 10px;
    }
  }

  ul,
  ol {
    li {
      line-height: 20px;
    }
  }
}
